{__NOLAYOUT__}
<layout name="no_nav" />

<!-- TOPBAR -->
<header class="top-bar flex-row">
  <a class="row-item row-item-auto top-bar-back" href="javascript:window.history.back()">返回</a>
  <h3 class="row-item top-bar-name">购物车</h3>
  <span class="row-item row-item-auto top-bar-menu"></span>
</header>


<empty name="cartItems">

<!-- 购物车里面没有东西 -->
<div class="pr-empty-cart">
  <p class="pr-cart-icon"><i class="iconfont">&#xe604;</i></p>
  <p class="pr-empty-message">您的购物车还是空的T_T</p>
  <a class="pr-empty-button" href="{$product.url}">去逛逛</a>
</div>

<else/>

<!-- 购物车里面有东西 -->
<section id="pr-cart-list" class="pr-cart-list">

  <volist name="cartItems" id="vo_product">
  <volist name="vo_product.items" id="vo_attr">

  <div class="pr-cart-item flex-row">

    <a class="pr-cart-good-img row-item row-item-3" href="javascript:;">
      <img src="{:getImageUrl($vo_attr['pic'], 'small')}">
    </a>

    <div class="pr-cart-good-info row-item row-item-7">

      <h5 class="pr-cart-good-name ellipsis">{$vo_product.name}</h5>

      <notempty name="vo_attr.attrs">
      <div class="pr-cart-good-attr">
        <span>规格：<foreach name="vo_attr.attrs" item="vo1" key="k">{$k}:{$vo1}&nbsp;&nbsp;</foreach></span>
      </div>
      </notempty>
      
      <div class="pr-cart-good-price">
        <span class="sub-price" data-subprice="{$vo_attr.productPrice}">单价：{$vo_attr.productPrice}元</span>&nbsp;&nbsp;&nbsp;&nbsp;
        <span class="total-price">总价：{$vo_attr['productPrice']*$vo_attr['quantity']}元</span>
      </div>

      <div class="pr-cart-good-num">

        <p class="pr-num flex-row">
          <span class="pr-num-minus row-item row-item-3" data-business-id="{$vo_attr.businessId}" data-product-id="{$vo_product.productId}" data-type="m">-</span>
          <input class="pr-num-input row-item row-item-4" name="quantity" readonly="readonly" value="{$vo_attr.quantity}">
          <span class="pr-num-plus row-item row-item-3" data-business-id="{$vo_attr.businessId}" data-product-id="{$vo_product.productId}" data-type="p">+</span>
        </p>
  
      </div>

      <a class="pr-cart-good-del" data-business-id="{$vo_attr.businessId}" data-product-id="{$vo_product.productId}">删除</a>

    </div>
  </div>

  </volist>
  </volist>

</section>

<footer class="pr-account">
  <form action="{:U('Order/confirmOrder')}" method="post">
    <div class="pr-account-info">
      <p>合计(不含运费)：<span id="total-price"></span></p>  
    </div>
    <div class="pr-account-right">
      <button type="submit" class="btn btn-orange">结算</button>  
    </div>
    <input type="hidden" name="sid" value="{$sid}">
  </form>
</footer>

<script type="text/javascript">
  $(function(){
  
    // 初始计算总价格
    updateTotalPrice();

    // 从购物车中移除商品
    $("#pr-cart-list").delegate(".pr-cart-good-del", "tap", function(){
      var _this = this;
      require(["modal"], function(M) {
        M.confirm({
          title: "删除商品", text: "确认要删除该商品吗？",
          buttons: [{
            text: "取消", close: true
          }, {
            text: "确认", close: true,
            click: function() {
              delGood.call( _this );
            }
          }]
        })
      });
    });

    function delGood() {

      APP.showLoading();

      var good = {},
          _this = this;
      good.businessId = $(this).attr( "data-business-id" );
      good.productId = $(this).attr( "data-product-id" );
      good.sid = {$sid};

      $.post("__CONTROLLER__/removeItem", good, function(response) {
        APP.hideLoading();
        APP.alert( response.msg );
        if ( response.error === 0 ) {
          $(_this).parent().parent().remove();
          updateTotalPrice();
        };
      });

    };
    
    
    // 选择商品数量
    $("#pr-cart-list").on("tap", ".pr-num-minus", changeNum);
    $("#pr-cart-list").on("tap", ".pr-num-plus", changeNum);

    function changeNum() {

      var numInput = $(this).siblings(".pr-num-input"),
          v = $(numInput).val()*1,
          type = $(this).attr("data-type");

      if ( type === "m" ) { // -

        v <= 1 ? APP.alert("数量真的已经不能再少了T^T")
               : $(numInput).val(v - 1);

      } else if ( type === "p" ) { // +

        $(numInput).val(v + 1);

      };

      var good = {}; //发送给后台的数据
      good.businessId = $(this).attr( "data-business-id" );
      good.productId = $(this).attr( "data-product-id" );
      good.quantity = $(numInput).val();
      good.sid = {$sid};
      APP.showLoading();
      $.post("__CONTROLLER__/updateQuantity", good, function(response) {
        APP.hideLoading();
        ( response.error == 1 ) && APP.alert( response.msg );
        ( response.error == 0 ) && updateTotalPrice();
      });

    };

    // 更新购物车总价钱
    function updateTotalPrice() {
      var cartList = $( ".pr-cart-item" );
      var total = 0; //总价钱
      var count = 0; //购车车总数量

      $(cartList).each(function( index, item ) {
        var subPrice = $(item).find(".sub-price").attr( "data-subprice" ) * 1,
            number = $(item).find(".pr-num-input").val() * 1;
        total += subPrice * number;
        $(item).find(".total-price").text( "总价：" + subPrice * number + "元" );
      });

      $("#total-price").text( total );
    }
  });
</script>
</empty>
